<template>
  <section>
    <div class="container">
      <div class="container-title">查询条件</div>
      <div class="container-body pd">
        <el-form
          label-position="right"
          label-width="100px"
          ref="searchForm"
          :model="searchForm"
          class="demo-form-inline"
        >
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="用户名：" size="small" prop="username" style="marginBottom:0px">
                <el-input
                  v-model="searchForm.username"
                  placeholder="请输入用户名"
                  prefix-icon="el-icon-search"
                  size="small"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-button
              class="is-tableBtn"
              size="small"
              @click="clearForm('searchForm')"
              >清空</el-button
            >
            <el-button
              class="is-tableBtn"
              type="primary"
              size="small"
              @click="GetTbAdminUserList(searchForm)"
              >查询</el-button
            >
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="container">
      <div class="container-title">账户列表</div>
      <div class="container-body pd">
        <el-row>
          <el-button
            type="primary"
            class="btn"
            size="small"
            @click="createNew()"
            >新增</el-button
          >
        </el-row>

        <el-table
          :data="tableData"
          v-loading="loading"
          border
          style="width: 100%"
          size="small"
        >
          <el-table-column prop="userName" label="账户" align="center">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="会员注册时间"
            align="center"
          >
          </el-table-column>

          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button
                class="btnwarning"
                type="warning"
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                class="btnwarning"
                type="danger"
                size="mini"
                @click="Delete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            @current-change="currentPage"
          >
          </el-pagination>
          <div class="clear"></div>
        </div>
      </div>
    </div>

    <!-- 新增管理员弹窗 -->
    <el-dialog
      :title="editID ? '编辑用户' : '新增用户'"
      :visible.sync="createadminUserPop"
      width="30%"
      @close="close()"
      center
    >
      <el-form
        :model="newadminUserForm"
        :rules="newadminUserRule"
        ref="newadminUserForm"
        label-width="120px"
        class="demo-newadminUserForm"
        size="small"
      >
        <el-form-item label="账户：" prop="UserName">
          <el-input
            v-model="newadminUserForm.UserName"
            placeholder="请输入账户"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码：" prop="Pwd">
          <el-input
            v-model="newadminUserForm.Pwd"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetFormESC('newadminUserForm')" size="small"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="
            editID
              ? updateadminUserForm('newadminUserForm')
              : resetForm('newadminUserForm')
          "
          size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </section>
</template>
<script>
export default {
  data() {
    return {
      page: 1,
      total: 0,
      editID: "", // 当前编辑id
      createadminUserPop: false, // 商品创建弹窗是否展示
      newadminUserForm: {
        UserName: "",
        Pwd: "",
      },
      newadminUserRule: {
        UserName: [
          { required: true, message: "请输入账户名称", trigger: "blur" },
        ],
        Pwd: [{ required: true, message: "请输入账户密码", trigger: "blur" }],
      },
      tableData: [],
      loading: true,
      searchForm: { username: "" },
    };
  },
  close() {
    this.editID = "";
    this.resetForm("newadminUserForm");
  },

  created() {
    this.GetTbAdminUserList(this.searchForm);
  },
  methods: {
    clearForm(formName) {
      // 清空筛选
      this.$refs[formName].resetFields();
    },
    createNew() {
      this.editID = "";
      this.createadminUserPop = true;
      this.newadminUserForm = {
        UserName: "",
        Pwd: "",
      };
    },
    currentPage(page) {
      this.page = page;
      this.GetTbAdminUserList(this.searchForm);
    },

    async GetTbAdminUserList(searchForm) {
      this.loading = true;
      let skip = (this.page - 1) * 10;
      // 请求案例
      let res = await this.$store.dispatch("GetTbAdminUserList", {
        username: searchForm.username,
        skip,
      });
      if (res.success) {
        this.tableData = res.data.itmes || [];
        this.total = res.data.totalCount;
      }
      this.loading = false;
    },

    async handleDelete(index, row) {
      let res = await this.$store.dispatch("DeleteTbAdminUser", {
        id: row.id,
      });
      if (res.success) {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.GetTbAdminUserList(this.searchForm);
        this.resetFormESC("newadminUserForm");
      }
    },

    async updateadminUserForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 编辑案例
          let res = await this.$store.dispatch("PutTbAdminUserPwd", {
            Id: this.editID,
            UserName: this[formName].UserName,
            Pwd: this[formName].Pwd,
          });
          if (res.success) {
            this.GetTbAdminUserList(this.searchForm);
            this.resetFormESC("newadminUserForm");
          }
          this.editID = "";
        } else {
          return false;
        }
      });
    },
    successMsg() {
      this.$message({
        showClose: true,
        message: "保存成功",
        type: "success",
        duration: 1000,
      });
    },
    async resetForm(formName) {
      // 请求案例
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.editID = "";
          let res = await this.$store.dispatch("PostTbAdminUser", {
            UserName: this[formName].UserName,
            Pwd: this[formName].Pwd,
          });
          if (res.success) {
            this.successMsg();
            this.GetTbAdminUserList(this.searchForm);
            this.resetFormESC("newadminUserForm");
          }
        } else {
          return false;
        }
      });
    },

    resetFormESC(formName) {
      // 充值表单
      this.createadminUserPop = false;
      this.$refs[formName].resetFields();
    },

    handleEdit(index, row) {
      this.newadminUserForm = {
        UserName: row.userName,
        Pwd: row.Pwd,
      };
      this.editID = row.id;
      this.createadminUserPop = true;
    },

    Delete(index, row) {
      this.$confirm("此操作将永久删除分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handleDelete(index, row);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/varibles.scss";
.btn {
  margin-bottom: $btnHeight;
  color: #ffff;
}
.btnwarning {
  color: $btnwarning;
}
.pageBox {
  padding-top: 10px;
  clear: both;
  .el-pagination {
    float: right;
  }

  .clear {
    clear: both;
  }
}
</style>
